<template>
  <div>
    员工名: <input type="text" v-model="emp.ename">
    性别:
    <input type="radio" v-model.lazy="emp.esex" value="男">男
    <input type="radio" v-model.lazy="emp.esex" value="女">女
    年龄: <input type="text" v-model.lazy="emp.age">

    <button type="button" @click="add" :data-ename="emp.ename"
            :data-esex="emp.esex" :data-age="emp.age">添加</button>
  </div>
</template>

<script>
  export default {
    name: "InputTable",
    data() {
      return {
        emp: {
          ename: "",
          esex: "男",
          age: 0
        }
      }
    }, methods: {
      add: function (event) {
        var e = {
          // 使用这个dataset 因为 ,如果直接使用data(){} 模块的数据,会导致数据产生关联,无法提交一次后断开,
          // 所有换次dataset取值,手动创建对象
          ename:event.srcElement.dataset.ename,
          esex:event.srcElement.dataset.esex,
          age:event.srcElement.dataset.age,
        }
        console.log(e);
        // 调用父组件的方法,把emp数据传输给fu组件
        this.tranProp(e);
        return;
      }
    },
    props: {
      tranProp: Function
    }
  }
</script>

<style scoped>

</style>
